<template>
  <div class="stockDetailList-page"> 
    <div class="store-des">
      <div class="des-item"><label>药店名称：</label><span class="content">{{orgName}}</span></div>
      <div class="des-item"><label>药店地址：</label><span class="content">{{hosAddr}}</span></div>
      <div class="des-item"><label>联系人：</label><span class="content">{{linkman}}</span></div>
      <div class="des-item"><label>联系电话：</label><span class="content">{{linkmanTelephone}}</span></div>
    </div>
    <div class="medical-des">
      <div class="des-item"><label>药品通用名：</label><span class="content">{{ypmc}}</span></div>
      <div class="des-item"><label>药品编码：</label><span class="content">{{code}}</span></div>
      <div class="des-item"><label>剂型：</label><span class="content">{{ypjx}}</span></div>
      <div class="des-item"><label>规格：</label><span class="content">{{ypgg}}</span></div>
      <div class="des-item"><label>批准文号：</label><span class="content">{{pzwh}}</span></div>
      <div class="des-item"><label>厂家：</label><span class="content">{{scqymc}}</span></div>
      <div class="des-item"><label>单位：</label><span class="content">{{zxbzdw}}</span></div>
    </div>
    <div class="date-range">
      <label>日期：</label>
      <DatePicker type="date" v-model="startTime" placeholder="选择日期" style="width: 200px"></DatePicker>
        <span style="lineHeight: 2; padding: 0 5px">~</span>
      <DatePicker type="date" v-model="endTime" placeholder="选择日期" style="width: 200px"></DatePicker>
    </div>
    <Table
        border
        :columns="column"
        :data="list"
        stripe
        :loading="tableLoading"
        no-filtered-data-text="未查询到符合条件的记录"
      ></Table>
      <Button class="backBtn" @click="handleBack">返回</Button>
  </div>
</template>

<script>
import api from "@/api/commonApi";
export default {
  data() {
    return {
      hospitalDrugId: this.$route.params.id,
      hospitalId: this.$route.query.hospitalid,
      drugId: this.$route.query.drugId,
      startTime: null,
      endTime: null,
      // 头部详细信息项
      orgName: null,
      hosAddr: null,
      linkman: null,
      linkmanTelephone: null,
      ypmc: null,
      code: null,
      ypjx: null,
      ypgg: null,
      pzwh: null,
      scqymc: null,
      zxbzdw: null,
      // table相关
      tableLoading: false,
      column: [
        {
          title: "排序", key: "index", align: "center", width: 70,
          render(h, params) {
            let resString = params.index + 1;
            return resString;
          }
        },
        { title: "日期", key: "dateStr", align: "center", width: 120},
        { title: "摘要", key: "type", align: "center" },
        {
          title: "期初云库存", align: "center",
          children: [
            { title: '数量', key: 'qcYkc', align: 'center' },
            { title: '价格（元）', key: 'qcRmb', align: 'center' },
            { title: '金额（元）', key: 'qcTotal', align: 'center' }
          ]
        },
        {
          title: "变动", align: "center",
          children: [
            {
              title: '入库数量', key: 'ruku', align: 'center',
            },
            {
              title: '出库数量', key: 'chuku', align: 'center',
            },
            {
              title: '价格（元）', key: 'jiage', align: 'center',
            }
          ]
        },
        {
          title: "期末云库存", align: "center",
          children: [
            { title: '数量', key: 'qmYkc', align: 'center' },
            { title: '价格（元）', key: 'qmRmb', align: 'center' },
            { title: '金额（元）', key: 'qmTotal', align: 'center' }
          ]
        },
      ],
      list: [],
    }
  },
  created() {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "",
        title: "药品云库存管理"
      },
      {
        path: "/index/operation/cloudStockManagement/stockmonitor/list",
        title: "云库存实时监管"
      }
    ];
    this.$emit("changeBreadList", breadList);
    this.cloudStockMonitorStockDetailList();
    this.cloudStockMonitorMedicalDetail();
  },
  methods: {
    cloudStockMonitorStockDetailList() {
      const reqObj = {
        drugId: this.hospitalDrugId,
        startTime: this.startTime || null,
        endTime: this.endTime || null
      };
      this.tableLoading = true;
      this.$axios.post(api.cloudStockMonitorStockDetailList, reqObj).then(res => {
        if (res.data.code === 1) {
          this.list = res.data.object;
          // 处理数据增加变动列
          this.list.forEach((item, index) => {
            const { qmYkc, qcYkc, qmRmb, qcRmb, type } = item;
            const reduceYkc = Number(qmYkc) - Number(qcYkc);
            const reduceRmb = Number(qmRmb) - Number(qcRmb);
            if (reduceYkc > 0) {
              item.ruku = reduceYkc;
            } else if (reduceYkc < 0) {
              item.chuku = Math.abs(reduceYkc);
            } else {
              // item.ruku = 0;
              // item.chuku = 0;
            }

            if (['调价', '盘点'].indexOf(type) > -1) {
              item.jiage = Math.round((Number(qmRmb)) * 100) / 100 ;
            } else {
              item.jiage = '';
            }
          });
          // 增加最后一行数据
          let qcYkcTotal = 0, qcRmbTotal = 0, rukuTotal = 0, chukuTotal = 0, qmYkcTotal = 0, qmRmbTotal = 0;
          this.list.forEach((item, index) => {
            item.qcYkc && (qcYkcTotal += item.qcYkc);
            item.qcTotal && (qcRmbTotal += item.qcTotal);
            item.ruku && (rukuTotal += item.ruku);
            item.chuku && (chukuTotal += item.chuku);
            item.qmYkc && (qmYkcTotal += item.qmYkc);
            item.qmTotal && (qmRmbTotal += item.qmTotal);
          }) 
          this.list.push({
            dateStr: '合计',
            qcYkc: qcYkcTotal,
            qcTotal: qcRmbTotal,
            ruku: rukuTotal,
            chuku: chukuTotal,
            qmYkc: qmYkcTotal,
            qmTotal: qmRmbTotal,
          })
          this.tableLoading = false;
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    cloudStockMonitorMedicalDetail() {
      const reqObj = {
        drugId: this.drugId,
        hospitalId: this.hospitalId
      };
      this.$axios.post(api.cloudStockMonitorMedicalDetail, reqObj).then(res => {
        if (res.data.code === 1) {
          let {} = res.data.object;
          const {
            orgName, hosAddr, linkman, linkmanTelephone,
            ypmc, code, ypjx, ypgg, pzwh, scqymc, zxbzdw
          } = res.data.object;
          this.orgName = orgName;
          this.hosAddr = hosAddr;
          this.linkman = linkman;
          this.linkmanTelephone = linkmanTelephone;
          this.ypmc = ypmc;
          this.code = code;
          this.ypjx = ypjx;
          this.ypgg = ypgg;
          this.pzwh = pzwh;
          this.scqymc = scqymc;
          this.zxbzdw = zxbzdw;
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    handleBack() {
      this.functionJS.queryNavgationTo(
        this,
        '/index/operation/cloudStockManagement/stockmonitor/medicalDetailList/' + this.drugId,
      );
    }
  }
}
</script>

<style lang="less" scoped>
.stockDetailList-page {
  margin-left: 1%;
  padding: 10px;
  width: 98%;
  background: #ffffff;
  box-sizing: border-box;
  .medical-des, .store-des {
    font-weight: bold;
    display: flex;
    .des-item {
      padding: 15px 40px 10px 0;
    }
  }
  .date-range {
    font-weight: bold;
    padding: 15px 0;
  }
  .backBtn {
    display: block;
    width: 100px;
    margin: 20px auto;
  }
}
</style>